<template>
  <div>
    <div class="ConsultationAddTitle">{{Title}}</div>
    <hr />
    <div class="Commentbox">
      <!-- <a-list v-if="comments.length" :dataSource="comments" itemLayout="horizontal">
        <a-list-item slot="renderItem" slot-scope="item">
          <a-comment :author="item.author" :content="item.content" :datetime="item.datetime">21321</a-comment>
        </a-list-item>
      </a-list>-->
      <a-comment>
        <div slot="content">
          <a-form-item
            style="font-size:17px"
            label="标题"
            :label-col="{ span: 2 }"
            :wrapper-col="{ span: 20,offset:1 }"
          >
            <a-input @change="handleChange2" :value="head" placeholder="输入标题，不超过20字符"></a-input>
          </a-form-item>
          <a-form-item
            label="正文"
            style="font-size:17px"
            :label-col="{ span: 2 }"
            :wrapper-col="{ span: 20,offset:1 }"
          >
            <a-textarea :rows="4" @change="handleChange" :value="value"></a-textarea>
          </a-form-item>
          <a-form-item>
            <a-form-item
              style="margin-left: 12.5%;"
              v-bind="formItemLayout"
              :help="`仅支持图片格式JPG、PNG，且每个文件大小不超过${imageSize}M`"
            >
              <div class="clearfix">
                <a-upload
                  v-decorator="['upload']"
                  name="upfile"
                  :headers="henderstoken"
                  action="/file/file/upload"
                  listType="picture-card"
                  :fileList="otherfileList"
                  :data="{to}"
                  @preview="handlePreview3"
                  @change="handleChange3"
                >
                  <div v-if="otherfileList.length < 3">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">添加图片</div>
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible3" :footer="null" @cancel="handleCancel3">
                  <img alt="example" style="width: 100%" :src="previewImage3" />
                </a-modal>
              </div>
            </a-form-item>
            <a-button
              style="margin-left: 12.5%;"
              htmlType="submit"
              :loading="submitting"
              @click="handleSubmit"
              type="primary"
            >发表问题</a-button>
            <a-button style=" margin-left: 30px;" @click="tolist">返回</a-button>
          </a-form-item>
        </div>
      </a-comment>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import { mapState } from "vuex";
export default {
  data() {
    return {
      Title: "请输入问题",
      comments: [],
      submitting: false,
      value: "",
      head: "",
      moment,
      imgarr: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
          md: { span: 10 }
        }
      },
      henderstoken: {
        Authorization: localStorage.getItem("token"),
      },
      to:sessionStorage.getItem("memberNo") + "_" + sessionStorage.getItem("username"),
      otherfileList: [],
      previewVisible3: false,
      previewImage3: ""
    };
  },
  computed: {
    ...mapState({
      imageSize: state => state.imageSize
    })
  },
  methods: {
    handleSubmit() {
      if (!this.head) {
        this.$message.error("请输入标题");
        return;
      }
      if (this.head.length >= 20) {
        this.$message.error("输入的标题大于20个字");
        return;
      }
      this.submitting = true;
      if (!this.value) {
        this.value = this.head;
      }
      for (let i = 0; i < this.otherfileList.length; i++) {
        this.imgarr.push(this.otherfileList[i].response.data);
      }
      console.log("图片数据", this.imgarr);

      this.$axios
        .post("/agent/chatRoom/addCharRoom", {
          head: this.head,
          content: this.value,
          arr: this.imgarr,
          type:"service",
        })
        .then(res => {
          console.log(res);
          this.submitting = false;
          this.$message.success("发布成功");
          this.$router.push({ path: "/ConsultationList2" });
        });
    },
    handleChange(e) {
      this.value = e.target.value;
    },
    handleChange2(e) {
      this.head = e.target.value;
    },
    tolist() {
      this.$router.push({ path: "/ConsultationList2" });
    },
    handlePreview3(file) {
      console.log("file", file);
      this.previewImage3 = file.url || file.thumbUrl;
      this.previewVisible3 = true;
    },
    handleCancel3() {
      this.previewVisible3 = false;
    },
    handleChange3({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb！`);
        return;
      }
      this.otherfileList = fileList;
      console.log(this.otherfileList);

      // let obj = fileList[0];
      // if (obj.response) {
      //   console.log("图片数据", obj.response.data);
      //   // this.otherImg = obj.response.data;
      // }
      // 根据服务端返回数据筛选上传成功的文件
      // let imgUrls = [];
      // fileList.forEach(file => {
      //   if (file.response && file.response.code === "0") {
      //     imgUrls.push(file.response.data.fileInfo.url);
      //   }
      // });
    }
  }
};
</script>

<style scoped>
.ConsultationAddTitle {
  font-size: 20px;
  font-weight: bold;
  margin-left: 10%;
  padding-top: 50px;
}
.Commentbox {
  width: 86%;
  margin: 0 auto;
}
hr {
  width: 80%;
  margin-top: 10px;
  height: 1px;
  border: none;
  background-color: #d0d0d0;
}
</style>
